<template>
  <div id="home">

    <h1>{{ msg }}</h1>
    <h2>新闻组件</h2>


    <ul>
      <li v-for="(item,key) in list">
        <router-link :to="'/detail/?aid=' +item.aid"> {{key}} --- {{item.title}}</router-link>
      </li>
    </ul>
  </div>
</template>



<script>
/**
 * 动态路由
 * 1.配置动态路由
 * const routers = [
      { path: '/detail/:aid', component: Detail } // 动态路由
    ]
 * 2.在要跳的页面获取传值
     alert(this.$route.params.aid);
 * 
 */

export default {
  data() {
    return {
      msg: "新闻组件",
      list: []
    };
  },
  methods: {
    requestData() {
      //jsonp请求的话  后台api接口要支持jsonp
      var api =
        "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";

      this.$http.jsonp(api).then(
        response => {
          console.log(response);

          //注意：用到this要注意this指向

          this.list = response.body.result;
        },
        function(err) {
          console.log(err);
        }
      );
    }
  },
  mounted() {
    console.log("news组件渲染完毕");
    this.requestData();
  }
};
</script>

<style lang="scss">
</style>